{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
  <title>
    Process
  </title>
  <script type='text/javascript' src='{% static 'js/input1.js' %}'></script>
  <script type='text/javascript' src='{% static 'js/display1.js' %}'></script>
  <link rel="stylesheet" href='{% static 'css/demo1.css' %}'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body style="padding:10px;">
  <div class="panel panel-primary">
      <div class="panel-heading"><h1 style="text-alig
        var text = JSON.strn:center;">
        MultiLevel Queue Scheduling
      </h1></div>
  <div class="panel-body">

    <div id="output">
    </div>

    <div class="card" style="height:70px;">
        <div style="width:250px;float:left;text-align:left;">
          Enter arrival time:
          <input style="width:200px;"id="newarrivaltime" class="form-control" type="text" value=""></input>
        </div>
        <div style="width:300px;float:left;text-align:left;">
          Enter burst time:
          <input style="width:200px;float:left;" id="newbursttime" class="form-control" type="text" value=""></input>
        </div>
        <div style="width:300px;float:left;text-align:left;">
          Enter Priority:
                  <br>
                      <select class="form-control" id="sel1" style="width:200px;">
                        <option>Foreground Process(1)</option>
                        <option>Background Process(0)</option>
                      </select>
                  </div>
          <button class="btn btn-success" onclick="addToList()" style="float:left;margin-top:20px;margin-left:10px;">Add</button>
        </div>
    </div>
  </div>

    <div class="panel-footer" style="height:50px;">
      <button style="float:right;" id="sender" class="btn btn-primary">Send the entire data</button>
    </div>
  </div>
  <div class="panel panel-success">
    <div class="panel-heading">
      <h3>
      Gantt chart
    </h3>
    </div>
    <div id="gantth"></div>
    <br><br>
    <div id="outer-div">
  </div>
    <br><br>
</div>
  <div class="panel panel-warning" style="width:50%;float:left;">
  <div class="panel-heading">
    <h3>Operations Taking Place</h3>
  </div>
  <div id="comments" class="panel-content">
  </div>
</div>
  <div class="panel panel-warning" style="width:50%;float:left;">
  <div class="panel-heading">
    <h3>Table</h3>
  </div>
    <div class="panel-content">
  <table id="ptab" class="table table-bordered">
  <thead>
  <tr id="thead">
  <th>PNO.</th>
  <th>Arrival time</th>
  <th>Burst time</th>
  <th>Completion time</th>
  <th>Waiting time</th>
  <th>Turn-around time</th>
  </tr>
  <tbody id="ptable">

  </tbody>
  </thead>
  </table>
    </div>
    </div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $('#sender').click(function(){
    var text = JSON.stringify(stuff);
    var alg = JSON.stringify("MULTIQ");
    var mytq = JSON.stringify(2);
    //console.log(text);
    console.log({value:text, algo:alg})
    $.post('/process/gateway/',{value:text, algo:alg, tq:mytq}, function(result){
      sequence = result["gantt"];
      a = result["table"]
      avgwt =0;
      avgtat =0;
      for(i=0;i<a.length;++i){
        avgwt += a[i].wt;
        avgtat += a[i].tat;
      }
      total = sequence.length;
      pixel = 0;
      i = 0;
      $('#outer-div,#comments,#ptable,#gantth').empty();
      // $('#thead').append('<th>PNO.</th> <th>Arrival time</th>  <th>Burst time</th>  <th>Completion time</th>  <th>Waiting time</th>  <th>Turn-around time</th>');
      totalTime = sequence[total-1].stop;
      pixel = parseInt(800/totalTime);
      containerWidth = pixel*totalTime + 2;
      $('#outer-div').css('width',containerWidth+'px');
      displayBlock(i);
    });
    });
</script>
